import React, { useState, CSSProperties } from 'react';
import './index.less';
import { BarsOutlined } from '@ant-design/icons';
import cs from 'classnames';
import { Transition } from 'react-transition-group';
import logo from '@/assets/images/logo.png';

const duration = 300;
//默认样式
const defaultStyle = {
  transition: `${duration / 1000}s`,
  transformOrigin: 'top',
  transform: 'scaleY(1)',
};
interface TransitionStyles {
  entering: CSSProperties; //进入时的样式
  entered: CSSProperties; //进入成功时的样式
  exiting: CSSProperties; //退出时的样式
  exited: CSSProperties; //退出成功时的样式
}
const transitionStyles: TransitionStyles = {
  entering: { transform: 'scaleY(1)' }, //不透明度为1
  entered: { transform: 'scaleY(1)' }, //不透明度为1
  exiting: { transform: 'scaleY(0)' }, //不透明度为0
  exited: { transform: 'scaleY(0)' }, //不透明度为0
};

interface Props {
  currentCategory: string;
  setCurrentCategory: (currentCategory: string) => any;
}

const allCourses = [
  {
    key: 'all',
    name: '全部课程',
  },
  {
    key: 'react',
    name: 'React课程',
  },
  {
    key: 'vue',
    name: 'Vue课程',
  },
];

export default function HomeHeader(props: Props) {
  const { currentCategory, setCurrentCategory } = props;
  const [isMenuVisible, setMenuVisible] = useState(false);

  return (
    <header className="home-header">
      <div className="logo-header">
        <img src={logo} />
        <BarsOutlined onClick={() => setMenuVisible(!isMenuVisible)} />
      </div>
      <Transition in={isMenuVisible} timeout={duration}>
        {(state: keyof TransitionStyles) => (
          <ul
            className="category"
            style={{
              ...defaultStyle,
              ...transitionStyles[state],
            }}
          >
            {allCourses.map(v => (
              <li
                key={v.key}
                className={cs({ active: currentCategory === v.key })}
                onClick={() => {
                  setCurrentCategory(v.key);
                  setMenuVisible(!isMenuVisible);
                }}
              >
                {v.name}
              </li>
            ))}
          </ul>
        )}
      </Transition>
    </header>
  );
}
